<template>
  <div ref="ctn" class="container">
    <!-- <div class="detail-tabs"> -->
      <!-- <div
        :class="{ 'tab-btn': true }"
        style="width: 100%; font-size: 0.64rem; text-align:center; font-weight: bold"
      >我的代言</div> -->
      <!-- <div
        :class="{
          'bottom-line-left': true
        }"
        :style="{background: mainColor}"
        style="width: 20%"
      ></div>-->
    <!-- </div> -->
    <!-- <div class="detail-tabs order-tabs">
      <div @click="orderStatus = 0" :class="{ 'tab-btn': true, active: orderStatus === 1 }">全部</div>
      <div @click="orderStatus = 1" :class="{ 'tab-btn': true, active: orderStatus === 1 }">待付款</div>
      <div
        @click="orderStatus = 2"
        :class="{ 'tab-btn': true, active: orderStatus === 2 }"
      >{{ "待发货" }}</div>
      <div
        @click="orderStatus = 3"
        :class="{ 'tab-btn': true, active: orderStatus === 3 }"
      >{{ "待收货" }}</div>
      <div @click="orderStatus = 4" :class="{ 'tab-btn': true, active: orderStatus === 4 }">待评价</div>
      <div
        :class="{
          'bottom-line': true,
          status2: orderStatus === 2,
          status3: orderStatus === 3,
          status4: orderStatus === 4,
          status5: orderStatus === 5
        }"
        :style="{background: mainColor}"
      ></div>
    </div>-->
    <div ref="list" class="order-list">
      <div v-if="!orderList.length" class="no-order">
        <img src="@/assets/待入账收益-assets/no_message.png" alt />
        <div class="text">暂无订单</div>
      </div>
      <div v-else v-for="(item, index) in orderList" :key="index" class="order-item" @click="() => {$router.push({path: '/my-represent-orders/my-represent-detail', query: {id: item.id, order_no:item.order_no}})}">
        <!-- <div class="tip">代言订单</div> -->
        <!-- <div class="order-status">
          <div class="order-time">{{ item.created_at }}</div>
          <div class="status-text">{{ orderStatusFilter(item.status) }}</div>
        </div>
        <div class="order_no">订单号：{{ item.order_no }}</div>-->
        <!-- <div
          @click="
            $router.push({
              path: '/order-detail',
              query: { order_no: item.order_no, status: item.status }
            })
          "
          class="item-info"
        >
          <item-cell :good="item"></item-cell>
        </div>-->
        <div class="represent-cell">
          <div class="left">
            <img :src="item.img_show" alt />
          </div>
          <div class="right">
            <div class="cell-name">{{item.name}}</div>
            <div class="order-no">
              <span>订单号：{{item.order_no}}</span>
              <span class="cell-price">￥{{item.price}}</span>
            </div>
          </div>
        </div>
        <!-- <div class="order-info">
          <div class="price">
            共{{ item.buy_number }}件商品 合计：￥{{
            item.buy_number * item.price
            }}
          </div>
        </div>-->
        <!-- <div class="order-operation">
          <div v-if="item.status === 0" class="operation-btn">
            <button @click="orderCancel(item, index)" class="style1">取消订单</button>
            <button
              @click="
                $router.push({
                  path: '/order-detail',
                  query: {
                    order_no: item.order_no,
                    status: item.status,
                    action: 'pay'
                  }
                })
              "
              class="style2"
            >立即付款</button>
          </div>
          <div v-else-if="item.status === 2" class="operation-btn">
            <a :href="'tel:' + service_tel">
              <button class="style2">联系客服</button>
            </a>
          </div>
          <div v-else-if="item.status === 3" class="operation-btn">
            <button
              @click="
                $router.push({
                  path: '/express-detail',
                  query: {
                    id: item.commodity[0].id
                  }
                })
              "
              v-if="is_serve === 0"
              class="style1"
            >查看物流</button>
            <button @click="orderConfirm(item, index)" class="style2">确认收货</button>
          </div>
          <div v-else-if="item.status === 4" class="operation-btn">
            <button
              class="style2"
              @click="
                $router.push({
                  path: '/order/comment',
                  query: { order_no: item.order_no }
                })
              "
            >评价</button>
          </div>
          <div v-else-if="item.status === 1 || item.status === -1" class="operation-btn">
            <button @click="orderDelete(item, index)" class="style1">删除订单</button>
          </div>
          <div v-else-if="item.status === 5" class="operation-btn">
            <button class="style1">取消</button>
          </div>
        </div>-->
      </div>
    </div>
    <load-more @loadMore="loadMore"></load-more>
    <!-- <recommend-good :list="recommendList"></recommend-good> -->
    <load-more @loadMore="recLoadMore"></load-more>
    <confirm ref="cfrm" link="/orders"></confirm>
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { getOrderList } from "@/api/profile";
import { getRepresentOrderList } from "@/api/represent";
import {
  orderCancel,
  orderDelete,
  orderConfirm,
  getRecommendGood
} from "@/api/mall";
import itemCell from "./order-item-cell.vue";
import loadMore from "@/components/load-more";
import confirm from "@/components/confirm";
import recommendGood from "@/components/recommend-good";
import { mapState } from "vuex";
const ERR_OK = 200;
export default {
  data() {
    return {
      is_serve: 1,
      orderStatus: 0,
      page: 1,
      orderList: [],
      recommendList: [],
      loading: false,
      isAll: false,
      page_rec: 1,
      isAll_rec: false
    };
  },
  computed: {
    ...mapState({
      service_tel: state => state.app.service_tel,
      mainColor: state => state.app.mainColor
    })
  },
  watch: {
    /* is_serve: function(val) {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      window.pageYOffset = 0;
      this.page = 1;
      this.page_rec = 1;
      this.isAll_rec = false;
      this.isAll = false;
      this.orderList = [];
      this.recommendList = [];
      switch (this.orderStatus) {
        case 1:
          this.getOrderList(1);
          break;
        case 2:
          this.getOrderList(1, 0);
          break;
        case 3:
          this.getOrderList(1, 2);
          break;
        case 4:
          this.getOrderList(1, 3);
          break;
        case 5:
          this.getOrderList(1, 4);
          break;
      }
    }, */
    orderStatus: function(val) {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      window.pageYOffset = 0;
      this.page = 1;
      this.page_rec = 1;
      this.isAll_rec = false;
      this.isAll = false;
      this.orderList = [];
      this.recommendList = [];
      this.getRecommendGood(1);
      switch (this.orderStatus) {
        case 1:
          // this.getOrderList(1);
          break;
        case 2:
          // this.getOrderList(1, 0);
          break;
        case 3:
          // this.getOrderList(1, 2);
          break;
        case 4:
          // this.getOrderList(1, 3);
          break;
        case 5:
          // this.getOrderList(1, 4);
          break;
      }
    }
  },
  methods: {
    loadMore() {
      if (this.loading || this.isAll) return;
      this.loading = true;

      switch (this.orderStatus) {
        case 1:
          // this.getOrderList(++this.page);
          break;
        case 2:
          // this.getOrderList(++this.page, 0);
          this._getRepresentOrderList(++this.page, this.orderStatus);
          break;
        case 3:
          // this.getOrderList(++this.page, 2);
          break;
        case 4:
          // this.getOrderList(++this.page, 3);
          break;
        case 5:
          // this.getOrderList(++this.page, 4);
          break;
      }
    },
    recLoadMore() {
      if (this.loading || this.isAll_rec || this.recommendList.length === 0)
        return;
      this.loading = true;
      this.getRecommendGood(++this.page_rec);
    },
    setStatus() {
      this.orderStatus = this.$route.query.orderStatus
        ? parseInt(this.$route.query.orderStatus)
        : 1;
      // this.is_serve = this.$route.query.is_serve
      //   ? parseInt(this.$route.query.is_serve)
      //   : 1;
      switch (this.orderStatus) {
        case 2:
          // this.getOrderList(1);
          this._getRepresentOrderList(this.page, this.orderStatus);
          this.getRecommendGood(this.page);
        //   break;
        // case 2:
        //   this.getOrderList(1, 0);
        //   break;
        // case 3:
        //   this.getOrderList(1, 2);
        //   break;
        // case 4:
        //   this.getOrderList(1, 3);
        //   break;
        // case 5:
        //   this.getOrderList(1, 4);
        //   break;
      }
    },
    orderStatusFilter(status) {
      switch (status) {
        case 0:
          return "待付款";
          break;
        case 1:
          return "已完成";
          break;
        case 2:
          return this.is_serve === 1 ? "待服务" : "待发货";
          break;
        case 3:
          return this.is_serve === 1 ? "已派单" : "待收货";
          break;
        case 4:
          return "待评价";
          break;
        case 5:
          return "售后未完成";
          break;
        case -2:
          return "售后已完成";
          break;
        case -1:
          return "已取消";
          break;
      }
    },
    getRecommendGood(page) {
      getRecommendGood({ page }).then(res => {
        if (res.status === 200) {
          this.recommendList.push(...res.data.data);
          if (res.data.data.length === 0) {
            this.isAll_rec = true;
            this.$dialog.toast({
              mes: "已经到最底了",
              timeout: 1500
            });
          }
        }
        this.$nextTick(() => {
          this.loading = false;
        });
      });
    },
    /* getOrderList(page, status) {
      getOrderList({
        page,
        status,
        is_serve: this.is_serve
      }).then(res => {
        if (res.status === 200) {
          this.orderList.push(...res.data.data);
          if (res.data.data.length === 0) {
            this.isAll = true;
            this.$dialog.toast({
              mes: "没有更多订单了",
              timeout: 1500
            });
          }
        }
        this.$nextTick(() => {
          this.loading = false;
        });
      });
    }, */
    orderCancel(item, index) {
      this.$refs.cfrm.show({
        text: "确认取消订单？",
        callback: () => {
          orderCancel({ order_no: item.order_no }).then(res => {
            if (res.status === 200) {
              this.$dialog.toast({
                mes: "取消成功",
                timeout: 1500,
                icon: "success"
              });
              this.orderList[index].status = -1;
            }
          });
        }
      });
    },
    orderDelete(item, index) {
      this.$refs.cfrm.show({
        text: "确认删除订单？",
        callback: () => {
          orderDelete({ order_no: item.order_no }).then(res => {
            if (res.status === 200) {
              this.$dialog.toast({
                mes: "删除成功",
                timeout: 1500,
                icon: "success"
              });
              this.orderList.splice(index, 1);
            }
          });
        }
      });
    },
    orderConfirm(item, index) {
      this.$refs.cfrm.show({
        text: "确认收货？",
        callback: () => {
          orderConfirm({ order_no: item.order_no }).then(res => {
            if (res.status === 200) {
              this.$dialog.toast({
                mes: "确认收货成功",
                timeout: 1500,
                icon: "success"
              });
              this.orderList[index].status = 4;
            }
          });
        }
      });
    },
    _getRepresentOrderList(page, status) {
      getRepresentOrderList(page, status)
        .then(res => {
          if (res.data.code === ERR_OK) {
            if (res.data.data.list.length === 0) {
              this.isAll = true;
              this.$dialog.toast({
                mes: "没有更多订单了",
                timeout: 1500
              });
            }
            this.orderList = this.orderList.concat(res.data.data.list);
            this.$nextTick(() => {
              this.loading = false;
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  components: {
    itemCell,
    loadMore,
    confirm,
    recommendGood
  },
  beforeRouteLeave(to, from, next) {
    this.$route.meta.keepAlive =
      to.path.indexOf("/order-detail") === -1 ? false : true;
    next();
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {});
  },
  created() {
    this.setStatus();
    // this.getRecommendGood(1)
  }
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100%;
  height: auto;
  color: #444444;
  font-size: 0.56rem;
  padding-bottom: 2rem;
  overflow: hidden;
  padding-top: 0rem;

  .detail-tabs {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #fff;
    height: 1.8rem;
    border-bottom: 1px solid #dfdfdf;
    display: flex;
    z-index: 99;

    .tab-btn {
      width: 50%;
      text-align: center;
      line-height: 1.8rem;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      transition-duration: 0.1s;
      position: relative;
      z-index: 99;
    }

    .active {
      font-weight: bold;
      font-size: 0.8rem;
    }

    .bottom-line {
      position: absolute;
      width: 10%;
      background: #0078ff;
      height: 0.15625rem;
      bottom: 0.5rem;
      left: 0;
      transform: translateX(50%);
      transition-duration: 0.2s;
      z-index: 9;
    }
    .bottom-line-left {
      position: absolute;
      width: 10%;
      background: #0078ff;
      height: 0.15625rem;
      bottom: 0.5rem;
      left: 0;
      transform: translateX(200%);
      transition-duration: 0.2s;
      z-index: 9;
    }
    .bottom-line-right {
      transform: translateX(700%);
    }

    .status2 {
      transform: translateX(450%);
    }

    .status3 {
      transform: translateX(650%);
    }

    .status4 {
      transform: translateX(850%);
    }

    .status5 {
      transform: translateX(850%);
    }
  }
  .order-tabs {
    top: 1.8rem;
  }
  .order-list {
    .no-order {
      text-align: center;
      padding: 2rem 0;

      img {
        height: 4rem;
      }

      .text {
        color: rgba(68, 68, 68, 1);
        font-size: 0.58rem;
      }
    }

    .order-item {
      margin: 0.67rem 3.2% 0;
      background-color: #fff;
      position: relative;
      border-radius: 16px;
      .tip {
        position: absolute;
        top: 0;
        background: red;
        color: #fff;
        padding: 3px 5px;
        border-top-left-radius: 16px;
        border-bottom-right-radius: 16px;
      }

      .order-status {
        padding: 0.4rem 3.2%;
        display: flex;
        justify-content: space-between;

        .status-text {
          color: #f85859;
        }
      }

      .order_no {
        padding: 0 3.2%;
        color: #999999;
      }

      .order-info {
        .price {
          color: #999999;
          text-align: right;
          padding: 0 3.2%;
        }
      }

      .order-operation {
        display: flex;
        justify-content: flex-end;
        padding: 0.48rem 3.2%;

        button {
          border-radius: 0.53rem;
          padding: 0 0.48rem;
          border: none;
          background: #fff;
          height: 1.06rem;
          line-height: 1.06rem;
          margin-left: 0.48rem;
        }

        .style1 {
          border: 0.5px solid rgba(220, 220, 220, 1);
          color: #444444;
        }

        .style2 {
          border: 0.5px solid #f85859;
          color: #f85859;
        }
      }
    }
  }
}
.represent-cell {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  .left {
  }
  .right {
    height: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .cell-price{
      color: red;
      margin-left: 0.4rem;
      font-weight: bold;
    }
  }
}
.slide-enter, .slide-leave-to{
  transform: translateX(100%);
}
.slide-enter-active, .slide-leave-active{
  transition: all 0.3s;
}
</style>
